<template>
  <div class="category-list">
    <div v-if="loading" class="text-center">
      <div class="spinner-border" role="status">
        <span class="visually-hidden">加载中...</span>
      </div>
    </div>
    
    <div v-else-if="error" class="alert alert-danger">
      {{ error }}
    </div>
    
    <div v-else>
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><router-link to="/">首页</router-link></li>
          <li class="breadcrumb-item active">所有分类</li>
        </ol>
      </nav>
      
      <h1 class="mb-4">所有分类</h1>
      
      <div v-if="categories.length > 0" class="row">
        <div v-for="category in categories" :key="category.id" class="col-md-4 mb-4">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title">
                <router-link :to="'/category/' + category.id">{{ category.name }}</router-link>
              </h5>
              <p class="card-text">{{ category.description }}</p>
              <router-link :to="'/category/' + category.id" class="btn btn-primary">查看文章</router-link>
            </div>
          </div>
        </div>
      </div>
      
      <div v-else class="alert alert-info">
        暂无分类
      </div>
      
      <div class="mt-4">
        <router-link to="/" class="btn btn-outline-secondary">返回首页</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, onMounted } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'CategoryList',
  setup() {
    const store = useStore()
    
    const categories = computed(() => store.state.categories)
    const loading = computed(() => store.state.loading)
    const error = computed(() => store.state.error)
    
    onMounted(() => {
      store.dispatch('fetchCategories')
    })
    
    return {
      categories,
      loading,
      error
    }
  }
}
</script>

<style scoped>
.card-title a {
  color: #333;
  text-decoration: none;
}

.card-title a:hover {
  color: #0d6efd;
}

.breadcrumb {
  background-color: transparent;
  padding: 0.75rem 0;
}
</style>